<template>
  <div class="number-box">
    <button
      @click="add"
      :style="{'background':bg}"
    >
      {{  num  }}
    </button>
  </div>
</template>

<script>
  export default {
    //自定义属性
    props:['base','bg'],
    data(){
      return {
        num:0,
      }
    },
    methods:{
      add(){
        //自定义属性可以通过this直接访问
        //子组件将数据传递给父组件:通过自定义事件,this.$emit,第一个参数是事件名称,第二个参数是传递的值
        this.num++
        this.$emit('add-num',this.num)
      }
    },
    //理解为小程序的onLoad/onReady
    mounted(){
      //父组件传进来的自定义属性base作为递增的初始值
      this.num = this.base
    }
  }
</script>
//Vue项目的所有组件的样式最终是会合并的,给组件样式添加scoped属性,就可以实现样式作用域(样式只在本组件起作用,不会影响其他组件)
<style lang="sass" scoped>
button
  margin: 10px
  padding: 10px 20px
</style>

